<template>
  <div class="appPage">
    <h3 class="tit">坐席管理</h3>
    <div class="search">
      <div class="left">
        <span style="margin:10px" v-if="realname !='admin'">企业</span>
        <!-- <el-input v-model="appid1" placeholder="请输入appid" class="handle-input mr10" v-if="realname == 'admin'" ></el-input> -->
        <el-select
          v-model="appid1"
          placeholder="请选择企业"
          label-width="80px"
          v-if="realname !='admin'"
          style="width:370px"
          >
          <el-option
            v-for="item in options2"
            :key="item.appid"
            :label="item.name"
            :value="item.appid">
          </el-option>
        </el-select> 

        <span style="margin:10px" v-if="realname =='admin'">appid</span>
        <el-input v-model="appid1" placeholder="请输入appid" class="handle-input mr10" v-if="realname =='admin'"></el-input>

        <span style="margin:10px">主叫</span>
        <el-input v-model="activePhone" placeholder="请输入主叫" class="handle-input mr10"></el-input>
        <!-- 是否通过验证   0 未通过验证 1 已通过验证 -->
        <span style="margin:10px">状态</span>
        <el-select
          v-model="value"
          placeholder="请选择状态"
          style="width: 500px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> 
      </div>
      <div class="right">
        <el-button type="primary" 
        icon="el-icon-search" 
        @click="getList()" 
        class="searchBtn">查找</el-button>

        <el-button type="primary" 
        icon="el-icon-refresh" 
        @click="reset()" 
        class="reset">重置</el-button>

        <el-button type="success" 
        icon="el-icon-mic" 
        @click="addSeats()" 
        class="addSeats">创建坐席</el-button>

      <el-button type="primary" 
        icon="el-icon-folder-opened" 
        @click="allSeats()" 
        class="allSeats">批量创建</el-button>
      </div>

    </div>
    <div class="container">
      <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="坐席账号" align="center"></el-table-column>
        <el-table-column prop="name" label="名字" align="center"></el-table-column>
        <el-table-column prop="activePhone" label="主叫" align="center" width="130"></el-table-column>
        <!-- <el-table-column prop="appid" label="企业appid" align="center"></el-table-column> -->
       
        <el-table-column prop="createdTime" label="创建坐席时间" align="center" width="180"></el-table-column>
        <el-table-column prop="status" label="是否通过" align="center">
          <template #default="scope">
            <span v-if="scope.row.status == 0" style="color:red;">等待验证</span>
            <span v-if="scope.row.status == 1">已通过验证</span>
        </template>

        </el-table-column>
        <el-table-column label="操作"  align="center" width="350">
          <template #default="scope">
            
            <el-button type="primary" @click="handleClick(scope)">变更号码</el-button>
            <el-button type="primary" @click="revalidation(scope)" v-if="scope.row.status == 0">重新验证</el-button>
            <el-button type="success" @click="revalidationPass(scope)" v-if="scope.row.status == 0 && realname =='admin'">验证通过</el-button>
            <el-button type="danger" @click="del(scope)">删除</el-button>
            

          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>


    </div>
    <!-- 创建坐席弹出框 -->
    <el-dialog title="创建坐席" v-model="addVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="代理编号" label-width="80px" v-if="realname == 'admin'">
          <el-select
          v-model="id"
          placeholder="请选择代理"
          label-width="80px"
          >
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.realname"
            :value="item.id">
          </el-option>
        </el-select> 
        </el-form-item>
        <el-form-item label="企业名字">
          <el-select
          v-model="appid"
          placeholder="请选择appid"
          >
          <el-option
            v-for="item in options2"
            :key="item.appid"
            :label="item.name"
            :value="item.appid"
          >
          </el-option>
        </el-select> 
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.activePhone"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAdd()" >确 定</el-button>
        </span>
      </template>
    </el-dialog>


    <!-- 编辑弹出框 -->
    <el-dialog title="编辑信息" v-model="editVisible" width="30%">
      <el-form ref="forms" :model="forms" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="forms.name"></el-input>
        </el-form-item>
        <el-form-item label="主叫">
          <el-input v-model="forms.activePhone" @change="onChange"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEdit()" >确 定</el-button>
        </span>
      </template>
    </el-dialog>

     <!-- 批量创建弹出框 -->
    <el-dialog title="批量创建" v-model="allVisible" width="30%" custom-class="upload">

      <div class="content">
        <el-button type="success" 
        icon="el-icon-download" 
        @click="upload()" 
      >点击下载模板</el-button>

      <el-upload
        class="upload-demo"
        action=""
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :auto-upload="false"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :on-change="changeUpload"
        drag="true"
      >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <template #tip>
          <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
        </template> -->
      </el-upload>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="allVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitUpload()" >确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

     


  
</template>

<script>
import axios from "axios";
export default {
  name: "seats",
  data(){
    return{
      fileList: [],
      appid:null,//添加坐席处的绑定
      appid1:null,//搜索框的绑定
      activePhone:null,
      status:null,
      pageTotal: 0, //总共有多少数据
      pageIndex: 1, //当前在第几页
      pageSize: 10, //前端规定每页显示数量
      page: 1, //接口请求的页数
      size: 10, //接口请求的每页的数量
      tableData: [],
      value:null,
      addVisible:false,
      editVisible:false,
      allVisible:false,
      options1:[],
      options2:[],
      realname:'',
      file:{},
      id:'',
      id1:'',//编辑时传的id
      options: [
        {
          value: 0,
          label: "未通过验证",
        },
        {
          value: 1,
          label: "已通过验证",
        },
      ],
      
      form:{
        appid:'',
        activePhone:'',
        name:'',
      },
      
      forms:{
        activePhone:'',
        name:'',
      },
     
    }
  
  },
  created() {
    
    this.realname = localStorage.getItem("realname"),
    this.getList()
    this.id = localStorage.getItem("id")
    this.changeAppid()
  },
  watch:{
    id(newValue,oldValue){
        this.options2 = []
        this.getData(newValue)
        console.log(this.appid)
        this.appid = ''
    },
    addVisible(){
      if(this.realname != "admin"){
          this.id = localStorage.getItem("id")
          this.getData(this.id)
      }
    }

  },
  methods:{

    //批量创建
    allSeats(){
      this.allVisible = true
    },
    //点击下载
    upload(){
       window.open("http://119.3.58.232:9005/phone.xls")
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    changeUpload(file,fileList){
      this.file = file.raw
      console.log(file)
      console.log(fileList)
    },
    submitUpload(){
        let formDate = new FormData()
        formDate.append('file',this.file)
        axios
        .post("http://118.190.2.70:9999/vo/seat-phone/import-seat",formDate)
        .then((res) => {
          console.log(res)
          this.$message.success(res.data.data)
          this.allVisible = false
          this.file = {}
          this.getList()
        })
        .catch((err) => {
          this.$message.error(err.data.message)
        });
    },


    //appid选择框
    changeAppid(){
      console.log(this.id)
      let params ={
        id:this.id
      }
      axios
        .post("http://118.190.2.70:9999/vo/uuid/find-uuidbyuser",params)
        .then((res) => {
          this.options2 = res.data.data
          console.log(res.data.data)
        })
        .catch((err) => {
          this.$message.error(err.data.message)
        });
    },

    //点击代理编号回显appid
    getData(id){
        console.log(id)
      let params = {
        id:id
      }
      axios
        .post("http://118.190.2.70:9999/vo/uuid/find-uuidbyuser", params)
        .then((res) => {
          this.options2 = res.data.data
          console.log(res.data.data)
        })
        .catch((err) => {
          this.$message.error(err.data.message)
        });

    },

    // 分页导航
    handlePageChange(val) {
      this.page = val;
      this.getList();
    },

    //展示、搜索
    getList(){
      let params = {
          page: this.page,
          size: this.size,
          appid:this.appid1,
          activePhone:this.activePhone,
          status:this.value,
      };
      axios
        .post("http://118.190.2.70:9999/vo/seat-phone/list", params)
        .then((res) => {
          this.tableData = res.data.data;
          this.pageTotal = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //重置
    reset(){
        this.appid = null;
        this.appid1 = null;
        this.activePhone = null;
        this.value = null;
        this.getList()
    },
    //创建坐席
    addSeats(){   
        this.options1 = []
        this.options2 = []
        this.form = {},
        this.addVisible = true
        let params = {
          page:1,
          size:99,
        }
        axios
        .post("http://118.190.2.70:9999/vo/user/list",params)
        .then((res) => {
          console.log(res.data.data)
          this.options1 = res.data.data
          console.log(this.options1)
          this.getList()
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加确定
    submitAdd(){
      let params = {
          appid:this.appid,
          name:this.form.name,
          activePhone:this.form.activePhone
        }
        axios
        .post("http://118.190.2.70:9999/vo/seat-phone/add", params)
        .then((res) => {
          console.log(res.data.statusCode)
            if(res.data.statusCode == '00000'){
            this.$message.success(res.data.message)
          }else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          console.log(err);
        });
        this.addVisible = false
    },
    //变更号码按钮
    handleClick(row){
      this.editVisible = true
      this.forms.name = row.row.name
      this.forms.activePhone = row.row.activePhone
      this.id1 = row.row.id
      this.appid = row.row.appid
    },
    //变更号码确定按钮
    submitEdit(){
      let params = {
        id:this.id1,
        appid:this.appid,
        name:this.forms.name,
        activePhone:this.forms.activePhone
      }
      axios
      .post("http://118.190.2.70:9999/vo/seat-phone/update", params)
      .then((res) => {
          if(res.data.statusCode == '00000'){
            this.$message.success(res.data.message)
            this.getList()
          }else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          console.log(err);
        });
        this.editVisible = false
        
    },
    revalidationPass(row){
          let params = {
            activePhone: row.row.activePhone,
            appid: row.row.appid,
            id: row.row.id,
            name: row.row.name,
            status: 1,
          }
           axios
          .post("http://118.190.2.70:9999/vo/seat-phone/update", params)
          .then((res) => {
              if(res.data.statusCode == '00000'){
                this.$message.success(res.data.message)
                this.getList()
              }else {
                this.$message.error(res.data.message)
              }
            })
            .catch((err) => {
              console.log(err);
            });
            this.editVisible = false
    },

  //删除
  del(row){
      let params = {
        id:row.row.id,
        appid:row.row.appid,
        activePhone:row.row.activePhone
      };
      this.$confirm('确认删除坐席吗，删除后不可恢复?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
      axios
        .post("http://118.190.2.70:9999/vo/seat-phone/del", params)
        .then((res) => {
          console.log(res)
          if(res.data.statusCode == '00000'){
            this.$message.success(res.data.message)
            this.getList()
          }
        })
        .catch((err) => {
          console.log(err);
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //重新验证按钮
    revalidation(row){
      let params = {
        activePhone:row.row.activePhone
      }
      axios
      .post("http://118.190.2.70:9999/vo/seat-phone/get_code", params)
      .then((res) => {
          console.log(res)
          if(res.data.statusCode == '00000'){
            this.$message.success(res.data.message)
            this.getList()
          }else{
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message)
        });
    },


},
};
</script>

<style scoped>
.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content .upload-demo{
  margin-top: 50px;
  
}
.content /deep/ .el-upload--text{
    display: flex;
    justify-content: center;
    align-items: center;
}
.tit{
  font-weight: normal;
  font-size: 36px;
  color: #333333;
}
.search{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.left{
  display: flex;
  align-items: center;
  width:750px
}
.left span{
  width: 120px;
  text-align:center
}
.searchBtn{
  margin-left: 15px;
}
.right{
  display: flex;
}
.reset{
  width: 80px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.add{
  margin-left: 15px;
}
.container{
  margin-top: 20px;
}
/* div /deep/.el-input__inner{
    width:335px
} */
</style>